<!DOCTYPE html>
<html ng-app="sinagp">
<head lang="en">
    <meta charset="UTF-8">
    <title>股票查询</title>
    <link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/zishiying.css"/>

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/angular.js"></script>
    <script src="jqm/jquery.mobile-1.4.5.js"></script>
</head>
<body ng-controller="parentCtr">
<!--自选股（首页）-->
<div data-role="page" ng-controller="homeCtr" id="optionalStock" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>
            自选股票
            <p class="date">时间更新中...</p>
        </h1>
        <a href="#" data-icon="search" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content">
        <div class="ui-grid-a" id="dapan">
            <div class="ui-block-a">
                <a href="#" class="ui-bar">
                    <h4>{{shData.nowPri | number:2}}<span ng-hide="hasGid">{{shData.gid}}</span></h4>
                    <p class="show-d">{{shData.name}} <span>{{shData.increPer}}%</span></p>
                </a>
            </div>
            <div class="ui-block-b">
                <a href="#" class="ui-bar">
                    <h4>{{szData.nowPri | number:2}}<span ng-hide="hasGid">{{szData.gid}}</span></h4>
                    <p class="show-d">{{szData.name}} <span>{{szData.increPer}}%</span></p>
                </a>
            </div>
        </div>
        <table data-role="table" class="ui-responsive table-stroke">
            <thead>
            <tr>
                <th>名称代码</th>
                <th>最新价</th>
                <th>涨跌价</th>
                <th>涨跌幅</th>
            </tr>
            </thead>
            <tbody id="mygpLists">
            <tr ng-repeat="d in zixuan">
                <td>
                    {{d.name}}
                    <p>{{d.gid.slice(2,d.gid.length)}}</p>
                </td>
                <td>{{d.nowPri | number:2}}</td>
                <td>{{d.increPer | number:2}}</td>
                <td>{{d.increase | number:2}}%</td>
            </tbody>
        </table>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#optionalStock" data-icon="home">自选股</a></li>
                <li><a href="#market" data-icon="action">行情</a></li>
                <li><a href="#transaction" data-icon="star">交易</a></li>
                <li><a href="#myself" data-icon="user">我</a></li>
            </ul>
        </div>
    </div>

</div>
<!--行情中心-->
<div data-role="page" ng-controller="mainCtr" id="market" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>行情中心</h1>
        <a href="#" data-icon="search" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content">
        <div data-role="navbar" id="lists" data-position="fixed">
            <ul>
                <li><a href="" class="ui-btn-active" i="sh">上证A股</a></li>
                <li><a href="" i="sz">深证A股</a></li>
            </ul>
        </div>
        <table data-role="table" class="ui-responsive table-stroke" id="gpLists">
            <thead>
            <tr>
                <th ng-click="col = 'code'; desc=!desc">名称代码</th>
                <th ng-click="col = 'trade'; desc=!desc">最新价</th>
                <th ng-click="col = 'pricechange'; desc=!desc">涨跌价</th>
                <th ng-click="col = 'changepercent'; desc=!desc">涨跌幅</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="d in gpData | orderBy:col:desc">
                <td>
                    {{d.name}}
                    <p>{{d.code}}</p>
                </td>
                <td>{{d.trade | number:2}}</td>
                <td>{{d.pricechange | number:2}}</td>
                <td>{{d.changepercent | number:2}}%</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="4">
                    <button ng-show="hasMore" ng-click="loadMore('data/select-sh.php?page=')" class="sh">点击加载更多</button>
                    <button ng-show="hasMore" ng-click="loadMore('data/select-sz.php?page=')" class="sz" style="display:none">点击加载更多</button>
                    <p ng-hide="hasMore">没有更多数据可以加载了</p>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>

</div>
<!--股票详情-->
<div data-role="page" ng-controller="detailCtr" id="detail" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>
            <span>{{data.name}}</span> <span>{{data.gid.slice(2)}}</span>
            <p>{{data.date}} {{data.time}}</p>
        </h1>
        <a href="#" data-icon="search" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content">
        <div class="gpDetail">
            <h1>
                {{data.nowPri | number:2}}
                <span>{{data.increase | number:2}}</span>
                <span>{{data.increPer | number:2}}%</span>
            </h1>
            <ul class="ui-grid-b">
                <li class="ui-block-a">今开 <span>{{data.todayStartPri | number:2}}</span></li>
                <li class="ui-block-b">最高 <span>{{data.todayMax | number:2}}</span></li>
                <li class="ui-block-c">成效额 <span>{{data.traAmount/10000 | number:2}}万</span></li>
                <li class="ui-block-a">昨收 <span>{{data.yestodEndPri | number:2}}</span></li>
                <li class="ui-block-b">最低 <span>{{data.todayMin | number:2}}</span></li>
                <li class="ui-block-c">成交量 <span>{{data.traNumber/10000 | number:2}}万</span></li>
            </ul>
        </div>
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#minurl" class="ui-btn-active">分时</a></li>
                    <li><a href="#dayurl">日K</a></li>
                    <li><a href="#weekurl">周K</a></li>
                    <li><a href="#monthurl">月K</a></li>
                </ul>
            </div>
            <div id="minurl">
                <img ng-src={{gopicture.minurl}} alt=""/>
            </div>
            <div id="dayurl">
                <img ng-src={{gopicture.dayurl}} alt=""/>
            </div>
            <div id="weekurl">
                <img ng-src={{gopicture.weekurl}} alt=""/>
            </div>
            <div id="monthurl">
                <img ng-src={{gopicture.monthurl}} alt=""/>
            </div>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <ul class="business">
                    <li>
                        <span>卖1</span><span>{{data.sellOnePri | number:2}}</span><span>{{data.sellOne/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>卖2</span><span>{{data.sellTwoPri | number:2}}</span><span>{{data.sellTwo/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>卖3</span><span>{{data.sellThreePri | number:2}}</span><span>{{data.sellThree/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>卖4</span><span>{{data.sellFourPri | number:2}}</span><span>{{data.sellFour/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>卖5</span><span>{{data.sellFivePri | number:2}}</span><span>{{data.sellFive/100 | number:0}}</span>
                    </li>
                </ul>
            </div>
            <div class="ui-block-b">
                <ul class="business">
                    <li>
                        <span>买1</span><span>{{data.buyOnePri | number:2}}</span><span>{{data.buyOne/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>买2</span><span>{{data.buyTwoPri | number:2}}</span><span>{{data.buyTwo/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>买3</span><span>{{data.buyThreePri | number:2}}</span><span>{{data.buyThree/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>买4</span><span>{{data.buyFourPri | number:2}}</span><span>{{data.buyFour/100 | number:0}}</span>
                    </li>
                    <li>
                        <span>买5</span><span>{{data.buyFivePri | number:2}}</span><span>{{data.buyFive/100 | number:0}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div data-role="navbar" data-grid="d">
            <ul>
                <li><a href="#" id="buy" ng-click="buy()">买入</a></li>
                <li><a href="#" id="sell" ng-click="sell()">卖出</a></li>
                <li><a href="#" id="recall" ng-click="recall()">撤单</a></li>
                <li><a href="#" id="mygp">加自选</a></li>
                <li><a href="#" id="other">更多</a></li>
            </ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>

</div>
<!--个股查询-->
<div data-role="page" ng-controller="gpselCtr" id="gpSelect" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>个股查询</h1>
    </div>

    <div class="ui-content">
        <input type="text" placeholder="请输入股票代码" ng-model="kw"/>
        <ul data-role="listview" data-inset="true">
            <li ng-show="hasData" ng-click="showDetail(data.gid)">
                <a href="">
                    <h4>{{data.name}}</h4>
                    <p>{{data.gid.slice(2)}}</p>
                </a>
            </li>
        </ul>
        <h4 class="history" ng-show="hasHistory">历史查询记录:<a href="#" ng-click="delAll()">清除记录</a></h4>
        <h4 class="history" ng-hide="hasHistory">没有历史，开始查询吧...</h4>
        <ul data-role="listview" data-inset="true">
            <li ng-click="showDetail(data.gid)" ng-repeat="data in history" ng-show="hasHistory">
                <a href="">
                    <h4>{{data.name}}</h4>
                    <p>{{data.gid.slice(2)}}</p>
                </a>
            </li>
        </ul>
    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>

</div>
<!--交易-->
<div data-role="page" ng-controller="tradeCtr" id="transaction" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>交易</h1>
        <a href="#" data-icon="home" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content">
        <div data-role="tabs" id="gpTabs">
            <div data-role="navbar"  style="margin-bottom:10px">
                <ul>
                    <li><a href="#gpTran" class="ui-btn-active">股票</a></li>
                    <li><a href="#gpxiny">信用</a></li>
                    <li><a href="#ganggu">港股通</a></li>
                    <li><a href="#duok">多空</a></li>
                    <li><a href="#qiquan">期权</a></li>
                </ul>
            </div>
            <div id="gpTran">
                <div class="ui-grid-c ui-responsive">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-shop ui-btn-icon-top" ng-click="buying()">买入</a>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-action ui-btn-icon-top" ng-click="selling()">卖出</a>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-info ui-btn-icon-top" ng-click="recalling()">撒单</a>
                        </div>
                    </div>
                    <div class="ui-block-d">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-star ui-btn-icon-top" ng-click="asset()">资产信息</a>
                        </div>

                    </div>
                </div>
                <div class="ui-grid-c ui-responsive">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-clock ui-btn-icon-top">委托成交</a>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-tag ui-btn-icon-top">历史成交</a>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-calendar ui-btn-icon-top">资金流水</a>
                        </div>
                    </div>
                    <div class="ui-block-d">
                        <div class="ui-bar ui-bar-a">
                            <a href="#" class="ui-btn ui-icon-cloud ui-btn-icon-top">银证转账</a>
                        </div>
                    </div>
                </div>
                <ul data-role="listview" style="margin-top:10px">
                    <li><a href="#">新股申购</a></li>
                    <li><a href="#">新三板</a></li>
                    <li><a href="#">开放式基金</a></li>
                    <li><a href="#">场内基金</a></li>
                    <li><a href="#">分级基金</a></li>
                    <li><a href="#">场内货币基金</a></li>
                </ul>
            </div>
            <div id="gpxiny">
                <h1>正在开发中，敬请期待...</h1>
            </div>
            <div id="ganggu">
                <h1>正在开发中，敬请期待...</h1>
            </div>
            <div id="duok">
                <h1>正在开发中，敬请期待...</h1>
            </div>
            <div id="qiquan">
                <h1>正在开发中，敬请期待...</h1>
            </div>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>

</div>
<!--我的帐户-->
<div data-role="page" ng-controller="userCtr" id="myself" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>我的帐户</h1>
        <a href="#" data-icon="home" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content">
        <h1>正在开发中，敬请期待...</h1>
    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>

</div>
<!--交易登录-->
<div data-role="page" ng-controller="loginCtr" id="login" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>交易登录</h1>
        <a href="#" data-icon="home" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content" class="content">
        <form id="loging">
            <h5 class="user-alt" ng-show="hasname">请保管好个人账号和密码，以免泄露！</h5>
            <h5 class="user-alt" ng-hide="hasname">账号或密码错误!</h5>
            <label for="text-basic">手机号码</label>
            <input type="text" name="text-basic" id="text-basic" value=""/>
            <label for="password">交易密码</label>
            <input type="password" name="password" id="password" value=""/>
            <div class="ui-field-contain">
                <label for="tradeOvertime" class="select">交易超时设置</label>
                <select name="tradeOvertime" id="tradeOvertime" data-native-menu="false">
                    <option>交易超时设置</option>
                    <option value="5" selected = "selected">5分钟</option>
                    <option value="10">10分钟</option>
                    <option value="15">15分钟</option>
                    <option value="30">30分钟</option>
                </select>
            </div>
            <div class="ui-field-contain">
                <label for="slider2">记住账号</label>
                <select name="slider2" id="slider2"  data-role="slider">
                    <option value="off">No</option>
                    <option value="on" selected = "selected">Yes</option>
                </select>
            </div>
            <input type="button" value="登录" ng-click="login()"/>
            <a href="#" class="rt" ng-click="goRegi()">还没账号？点击注册</a>
        </form>
        <form id="register" style="display:none">
            <h5 class="user-alt" id="user-alt">请保管好个人账号和密码，以免泄露！</h5>
            <h5 class="user-alt" id="error" style="display:none;">该手机号码已注册!</h5>
            <label for="uname">请输入用户名</label>
            <input type="text" name="uname" id="uname" value=""/>
            <label for="phone">请输入手机号码</label>
            <input type="text" name="phone" id="phone" value="" ng-model="phone"/>
            <label for="upwd">请输入交易密码</label>
            <input type="password" name="upwd" id="upwd" value=""/>
            <label for="ucode">请牢记安全码</label>
            <input type="text" name="upwd" id="ucode" value="" disabled/>
            <button ng-click="getCode()">点击获取安全码</button>
            <input type="button" value="注册" ng-click="register()" id="sumbit"/>
        </form>
    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>
</div>
<!--委托交易-->
<div data-role="page" ng-controller="entrustCtr" id="entrust" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos='notext' data-rel="back"></a>
        <h1>委托交易</h1>
        <a href="#" data-icon="gear" data-iconpos='notext' class="ui-btn-right"></a>
    </div>

    <div class="ui-content">
        <div data-role="tabs" id="jiaoyiTabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#gpbuy" class="ui-btn-active">买入</a></li>
                    <li><a href="#gpsell">卖出</a></li>
                    <li><a href="#quxiao">撒单</a></li>
                    <li><a href="#chengjiao">成交</a></li>
                    <li><a href="#mymoney">资产</a></li>
                </ul>
            </div>
            <div id="gpbuy">
                <div class="ui-grid-a weiToBar">
                    <div class="ui-block-a">
                        <div class="ui-bar" id="buy-left">
                            <input type="text" placeholder="股票代码" name="daima" ng-model="daima"/>
                            <div data-role="controlgroup" data-type="horizontal">
                                <button onclick="priJisuan(this)">-</button>
                                <input type="text" placeholder="价格" name="price" id="gpri" class="count"  data-wrapper-class="controlgroup-textinput ui-btn"/>
                                <button onclick="priJisuan(this)">+</button>
                            </div>
                            <div class="float">
                                <p class="lf">涨停：<span id="zhang">{{data.yestodEndPri*1.1 | number:2}}</span></p>
                                <p class="rt">跌停：<span id="die">{{data.yestodEndPri*0.9 | number:2}}</span></p>
                            </div>
                            <div data-role="controlgroup" data-type="horizontal">
                                <button onclick="canbuy(this)">-</button>
                                <input type="text" placeholder="数量" name="count" class="count" data-wrapper-class="controlgroup-textinput ui-btn"/>
                                <button onclick="canbuy(this)">+</button>
                            </div>
                            <div class="float">
                                <p class="lf">最新价：<span>{{data.nowPri | number:2}}</span><span> {{data.increase}}</span></p>
                                <p class="rt">可买：<span id="canbuy"> 股</span></p>
                            </div>
                            <div class="buy-btn">
                                <a href="#" class="ui-btn ui-btn-inline" ng-click="allin()">全部</a>
                                <a href="#" class="ui-btn ui-btn-inline" ng-click="yibanin()">1/2</a>
                                <a href="#" class="ui-btn ui-btn-inline" ng-click="sanin()">1/3</a>
                                <a href="#" class="ui-btn ui-btn-inline" ng-click="siin()">1/4</a>
                            </div>
                            <button ng-click="theBuy()">买 入</button>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar" id="buy-right">
                            <ul class="lists">
                                <li>
                                    <span>卖5</span>
                                    <span>{{data.sellFivePri | number:2}}</span>
                                    <span>{{data.sellFive}}</span>
                                </li>
                                <li>
                                    <span>卖4</span>
                                    <span>{{data.sellFourPri | number:2}}</span>
                                    <span>{{data.sellFour}}</span>
                                </li>
                                <li>
                                    <span>卖3</span>
                                    <span>{{data.sellThreePri | number:2}}</span>
                                    <span>{{data.sellThree}}</span>
                                </li>
                                <li>
                                    <span>卖2</span>
                                    <span>{{data.sellFivePri | number:2}}</span>
                                    <span>{{data.sellFive}}</span>
                                </li>
                                <li>
                                    <span>卖1</span>
                                    <span>{{data.sellTwoPri | number:2}}</span>
                                    <span>{{data.sellTwo}}</span>
                                </li>
                                <li>
                                    <span>买1</span>
                                    <span>{{data.buyOnePri | number:2}}</span>
                                    <span>{{data.buyOne}}</span>
                                </li>
                                <li>
                                    <span>买2</span>
                                    <span>{{data.buyTwoPri | number:2}}</span>
                                    <span>{{data.buyTwo}}</span>
                                </li>
                                <li>
                                    <span>买3</span>
                                    <span>{{data.buyThreePri | number:2}}</span>
                                    <span>{{data.sellFive}}</span>
                                </li>
                                <li>
                                    <span>买4</span>
                                    <span>{{data.buyFourPri | number:2}}</span>
                                    <span>{{data.buyFour}}</span>
                                </li>
                                <li>
                                    <span>买5</span>
                                    <span>{{data.buyFivePri | number:2}}</span>
                                    <span>{{data.buyFive}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div data-role="tabs" id="gpcang">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#gpkuqun" class="ui-btn-active">持仓</a></li>
                            <li><a href="#gpmin">分时</a></li>
                            <li><a href="#gpmi" ng-click="myzixuan()">自选股</a></li>
                        </ul>
                    </div>
                    <table id="gpkuqun" data-role="table" class="ui-responsive table-stroke">
                        <thead>
                        <tr>
                            <th>名称/市值</th>
                            <th>盈亏</th>
                            <th>持仓/可用</th>
                            <th>成本/现价</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="d in kucun">
                            <td>
                                {{d.name}}<span style="display:none">{{d.gid}}</span>
                                <p>{{d.nowPri*d.count | number:2}}</p>
                            </td>
                            <td>
                                <p>{{d.nowPri*d.count-d.pri*d.count | number:2}}</p>
                                <p>{{((d.nowPri*d.count-d.pri*d.count)/(d.nowPri*d.count))*100 | number:2}}%</p>
                            </td>
                            <td>
                                <p>{{d.count | number:0}}</p>
                                <p>{{d.count | number:0}}</p>
                            </td>
                            <td>
                                <p>{{d.pri}}</p>
                                <p>{{d.nowPri | number:2}}</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="gpmin">
                        <img ng-src="{{_data.gopicture.minurl}}"/>
                    </div>
                    <table id="gpmi" data-role="table" class="ui-responsive table-stroke">
                        <thead>
                        <tr>
                            <th>名称代码</th>
                            <th>最新价</th>
                            <th>涨跌价</th>
                            <th>涨跌幅</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="d in zixuan" class="abc">
                            <td>
                                {{d.name}}
                                <p>{{d.gid.slice(2)}}</p>
                            </td>
                            <td>{{d.nowPri | number:2}}</td>
                            <td>{{d.increase | number:2}}</td>
                            <td>{{d.increPer | number:2}}%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="gpsell">
                <h3>正在开发中</h3>
            </div>
            <div id="quxiao">
                <h3>正在开发中</h3>
            </div>
            <div id="chengjiao">
                <h3>正在开发中</h3>
            </div>
            <div id="mymoney">
                <h3>开发中</h3>
            </div>
        </div>

    </div>

    <div data-role="footer" data-position="fixed" class="foot"></div>

</div>


<script src="js/sinagp.js"></script>
<script src="js/main.js"></script>
</body>
</html>

